<template>
  <div class="annotation-control flex" @click.stop>
    <div class="control-btn flex">
      <div
        v-for="(btn, index) in btnList"
        :key="index"
        class="common flex-column"
        fixed
        :class="[selectedModel === btn.value && 'common-active']"
        @click="select(btn.value)"
      >
        <div
          class="fixed-img"
          :class="`fixed-img-${btn.value}`"
          v-if="fixedBtn.includes(btn.value)"
        ></div>

        <img
          v-else-if="!['clean', 'pen'].includes(btn.value)"
          :src="selectedModel === btn.value ? btn.activeImg : btn.img"
          class="img"
        />

        <el-popover
          placement="top"
          trigger="hover"
          popper-class="annotation-popover"
          width="150"
        >
          <template #reference>
            <div>
              <img
                v-if="btn.value === 'pen'"
                :src="selectedModel === btn.value ? btn.activeImg : btn.img"
                class="img"
              />
            </div>
          </template>
          <div class="pen-list flex">
            <div
              class="dot-box flex-center hover"
              :class="[index === penSizeIndex && 'dot-box-active']"
              v-for="(pen, index) in controlSizeList"
              @click="onPenSize(index)"
              :key="index"
            >
              <div
                class="dot"
                :style="{ width: pen * 4 + 'px', height: pen * 4 + 'px' }"
              ></div>
            </div>
          </div>
        </el-popover>
        <el-popover
          placement="top"
          trigger="hover"
          popper-class="annotation-popover"
          width="150"
          id="clean-popover"
        >
          <template #reference>
            <div>
              <img
                v-if="btn.value === 'clean'"
                :src="selectedModel === btn.value ? btn.activeImg : btn.img"
                class="img"
              />
            </div>
          </template>
          <div class="pen-list flex">
            <div
              class="dot-box flex-center hover"
              :class="[index === cleanSizeIndex && 'dot-box-active']"
              v-for="(pen, index) in controlSizeList"
              @click="onCleanSize(index)"
              :key="index"
            >
              <div
                class="dot"
                :style="{ width: pen * 4 + 'px', height: pen * 4 + 'px' }"
              ></div>
            </div>
          </div>
        </el-popover>
        {{ btn.text }}
      </div>
    </div>
    <div class="action-box flex">
      <el-button size="large" @click="onAction('cancel')">取消</el-button>
      <el-button
        size="large"
        type="primary"
        @click="onAction('save-img')"
        :disabled="saveLoading"
        >保存</el-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { annotateMitt } from '@/utils/tools/bus'
import { btnList as list } from './util'

const props = defineProps({
  isHasHisUrl: {
    type: Boolean,
    default: false
  }
})
const selectedModel = ref('')
const btnList = ref([])

const saveLoading = ref(false)
// 当点击批注的时候，通知AnnotationCanvas组件初始化画板
onMounted(() => {
  annotateMitt.emit('annotationControl', {
    model: 'init'
  })
  annotateMitt.on('annotationControl', param => {
    let { model } = param
    switch (model) {
      case 'save-img':
        saveLoading.value = true
        break
      case 'save-img-url':
        saveLoading.value = false
        break
    }
  })
  selectedModel.value = 'pen'
})
onUnmounted(() => {
  annotateMitt.emit('annotationControl', {
    model: ''
  })
})
const fixedBtn = btnList.value.slice(0, 3).map(item => item.value)
const select = type => {
  let isFixed = fixedBtn.includes(type)

  if (!isFixed) {
    selectedModel.value = type === selectedModel.value ? 'stop' : type
  } else {
    selectedModel.value = 'stop'
  }

  if (isFixed || selectedModel.value !== 'stop') {
    annotateMitt.emit('annotationControl', {
      model: type
    })
  } else if (selectedModel.value === 'stop') {
    annotateMitt.emit('annotationControl', {
      model: 'stop'
    })
  }
}

const onAction = type => {
  annotateMitt.emit('annotationControl', {
    model: type
  })
}

const controlSizeList = [3, 4, 5]
const penSizeIndex = ref(0)
const onPenSize = index => {
  penSizeIndex.value = index
  selectedModel.value = 'pen'
  annotateMitt.emit('annotationControl', {
    model: 'pen-size',
    penSize: controlSizeList[penSizeIndex.value] + index * 2
  })
}
const cleanSizeIndex = ref(0)
const onCleanSize = index => {
  cleanSizeIndex.value = index
  selectedModel.value = 'clean'
  annotateMitt.emit('annotationControl', {
    model: 'clean-size',
    penSize: cleanSizeIndex.value + 1
  })
}

const initData = () => {
  btnList.value = !props.isHasHisUrl
    ? list.filter(item => item.value !== 'resetUrl')
    : list
}
initData()
</script>

<style lang="less" scoped>
.annotation-control {
  width: 100%;
  height: 100%;
  padding: 12px 0;
  padding-bottom: 0;
  gap: 10px;
  border-radius: 24px;
  .control-btn {
    gap: 4px;
    margin: 0 auto;
    .common {
      width: 64px;
      padding: 4px;
      border-radius: 12px;
      align-items: center;
      white-space: nowrap;
      &:hover {
        cursor: pointer;
      }
      img {
        width: 34px;
      }
      &:active {
        background-color: @theme-color;
      }
    }
    [fixed]:active {
      background-color: @theme-color;
      color: #fff;
      .fixed-img-bigger {
        background-image: url('@/assets/images/assignment/mark/bigger-active.png');
      }
      .fixed-img-smaller {
        background-image: url('@/assets/images/assignment/mark/smaller-active.png');
      }
      .fixed-img-rotate {
        background-image: url('@/assets/images/assignment/mark/rotate-active.png');
      }
    }
    .fixed-img {
      width: 34px;
      height: 34px;
      background-size: cover;
    }
    .fixed-img-bigger {
      background-image: url('@/assets/images/assignment/mark/bigger.png');
    }
    .fixed-img-smaller {
      background-image: url('@/assets/images/assignment/mark/smaller.png');
    }
    .fixed-img-rotate {
      background-image: url('@/assets/images/assignment/mark/rotate.png');
    }
    .common-active {
      background-color: @theme-color;
      color: #fff;
    }
  }

  .action-box {
    float: right;
  }
}
</style>

<!-- eslint-disable -->
<style lang="less">
.annotation-popover {
  .pen-list {
    gap: 12px;
    .dot-box {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      .dot {
        border-radius: 100%;
        background-color: #d0d3d6;
      }
    }
    .dot-box-active {
      background-color: @theme-color;
    }
  }
}
</style>
